<template>
  <div>
    <el-button type="primary" round size="mini" @click="add">增加工费</el-button>
    <el-table
    ref="feeRef"
    :data="feeList"
    tooltip-effect="dark"
    style="width: 100%"
    border>
    <el-table-column
    type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="cid"
      label="成色"
      width="100">
    </el-table-column>
    <el-table-column
      prop="sid"
      label="款式"
      width="100">
    </el-table-column>
    <el-table-column
      prop="basicWages"
      label="基本工费（元）"
      width="150">
    </el-table-column>
    <el-table-column
      prop="otherWages"
      label="其他工费（元）"
      width="150">
    </el-table-column>
    <el-table-column
      prop="loss"
      label="损耗"
      width="100">
    </el-table-column>
    <el-table-column
      prop="mloss"
      label="微镶损耗"
      width="100">
    </el-table-column>
     <el-table-column label="操作" >
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-dialog title="增加工费" :visible.sync="addVisible" width="40%" center>
      <el-form :model="addForm" :inline="true" label-width="80px">
        <el-form-item label="成色" >
          <el-select v-model="addForm.cid" >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="款式" >
          <el-select v-model="addForm.sid" >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="基本工费" >
          <el-input v-model="addForm.basicWages" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="其他工费" >
          <el-input v-model="addForm.otherWages" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="损耗" >
          <el-input v-model="addForm.loss" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="微镶损耗" >
          <el-input v-model="addForm.mloss" autocomplete="off"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="editVisible" width="40%" center>
      <el-form :model="addForm" :inline="true" label-width="80px">
        <el-form-item label="成色" >
          <el-select v-model="addForm.cid" >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="款式" >
          <el-select v-model="editForm.sid" >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="基本工费" >
          <el-input v-model="editForm.basicWages" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="其他工费" >
          <el-input v-model="editForm.otherWages" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="损耗" >
          <el-input v-model="editForm.loss" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="微镶损耗" >
          <el-input v-model="editForm.mloss" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'ProcessingFeeTable',
  data(){
    return{
      feeList:[
        {cid:'1',sid:'2',basicWages:'3',otherWages:'4',loss:'5',mloss:'6'},
        {cid:'11',sid:'22',basicWages:'33',otherWages:'44',loss:'55',mloss:'66'},
      ],
      addForm:[],
      editForm:[],
      addVisible:false,
      editVisible:false
    }
  },
  methods:{
    //增加工费
    add(){
      this.addVisible = true
    },
    //编辑
    handleEdit(){
      this.editVisible = true
    },
    //删除
    handleDelete(){}
  }
}
</script>

<style lang="scss" scoped>
  .el-input{
    width: 222px;
  }

</style>